<style lang="less" scoped>
.permission-list {
  position: relative;
  padding: 20px;
  border: 1px solid #3f95ff;
  max-height: 200px;
  overflow: auto;
  .select-all {
    position: absolute;
    right: 20px;
    z-index: 10;
  }
}
</style>
<template>
  <div class="comp-new">
    <el-form ref="newForm" :model="newForm" :label-width="150 + 'px'">
      <el-form-item label="企业单位：">{{ homeData.name }}</el-form-item>
      <el-form-item
        label="真实姓名："
        prop="name"
        :rules="[
          { required: true, message: '请输入真实姓名', trigger: 'change' },
        ]"
      >
        <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
      </el-form-item>
      <el-form-item
        label="登录账号："
        prop="accountname"
        :rules="[
          { required: true, message: '请输入登录账号', trigger: 'change' },
        ]"
      >
        <el-input
          placeholder="请输入"
          type="text"
          v-model.trim="newForm.accountname"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="登录密码："
        prop="accountpassword"
        :rules="[
          { required: true, message: '请输入登录密码', trigger: 'change' },
          { validator: validatePass, trigger: 'change' },
        ]"
      >
        <el-input
          placeholder="登录密码"
          type="password"
          v-model.trim="newForm.accountpassword"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选择角色："
        prop="roleId"
        :rules="[{ required: true, message: '请选择角色', trigger: 'change' }]"
      >
        <el-select v-model="newForm.roleId" placeholder="请选择">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in roleList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择权限：" prop="permissionsId" v-if="false">
        <div class="permission-list">
          <div class="select-all">
            <el-button
              type="green"
              v-if="isAllSelected"
              @click="cancelSelectAll"
              >取消全选</el-button
            >
            <el-button type="green" v-else @click="selectAll">全选</el-button>
          </div>
          <el-tree
            ref="tree"
            node-key="id"
            :props="props"
            :data="permissionList"
            show-checkbox
            :indent="36"
            :default-expanded-keys="defaultExpandedKeys"
            @check-change="handleCheckChange"
          >
          </el-tree>
          <!-- :default-checked-keys="checkedKeys" -->
        </div>
        <!-- <div v-else>请选择角色</div> -->
      </el-form-item>
      <el-form-item label="访问规则：">
        <p>当前账号访问规则：</p>
        <p>星期：周一,周二,周三,周四,周五,周六,周日</p>
        <p>时间：0001,2359</p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "newRecordAccount",
  props: {
    homeData: {
      type: Object,
      default() {
        return null;
      },
    },
  },
  computed: {
    ...mapState(["scale"]),
  },
  watch: {
    homeData() {
      // this.initForm()
    },
  },
  data() {
    return {
      newForm: {},
      loading: false,
      roleList: [],
      checkedRole: [],

      props: {
        label: "name",
        children: "childList",
      },
      permissionList: [],
      checkedKeys: [],
      defaultExpandedKeys: [],
      isAllSelected: false,
    };
  },
  created() {
    this.getRoles();
    this.getPermission();
  },
  methods: {
    validatePass(rule, value, callback) {
      const reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;
      if (!reg.test(value)) {
        callback(
          new Error(
            "请输入8-16位字符,可使用大写字母,小写字母,数字或符号的至少三种组合"
          )
        );
      } else {
        callback();
      }
    },
    getRoleDetail(id, cbk) {
      this.$get("/systemsetup/systemsetup/roleDetail", {
        id: id,
      }).then(
        (res) => {
          let thisData = res.data;
          cbk && cbk(thisData);
        },
        (err) => {
          //
        }
      );
    },
    roleChange(id) {
      this.getRoleDetail(id, (res) => {
        this.permissionList = this.setPermissionList(res.permissionsList);
      });
    },
    setPermissionList(list) {
      list = JSON.parse(JSON.stringify(list));
      let temp = list.filter((item) => item.flag);
      temp.forEach((item) => {
        if (item.childList) {
          item.childList = this.setPermissionList(item.childList);
        }
      });
      return temp;
    },
    getPermission() {
      this.$get("/systemsetup/systemsetup/permissionsTreeList").then((res) => {
        this.permissionList = res.data.childList;
      });
    },
    handleCheckChange(data) {
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      let halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      this.newForm.permissionIds = [checkedKeys, halfCheckedKeys].join(",");
    },
    getRoles() {
      this.$get("/systemsetup/systemsetup/roleListNoPage").then(
        (res) => {
          this.roleList = res.data;
        },
        (err) => {
          //
        }
      );
    },
    selectAll() {
      this.isAllSelected = true;
      this.$refs.tree.setCheckedNodes(this.permissionList);
    },
    cancelSelectAll() {
      this.isAllSelected = false;
      this.$refs.tree.setCheckedNodes([]);
      this.$refs.tree.setCheckedKeys([]);
    },
    submitAction() {
      this.$refs["newForm"].validate((valid) => {
        if (valid) {
          this.$emit("submitting");
          this.loading = true;
          let params = Object.assign(
            { homeId: this.homeData.id },
            this.newForm
          );
          params.type = "2";
          this.$ajax({
            url: "/systemsetup/systemsetup/userAdd",
            method: "post",
            data: params,
          }).then(
            (data) => {
              this.loading = false;
              this.$message.success("保存成功");
              this.$emit("success", data);
            },
            (error) => {
              this.loading = false;
              this.$message.error(error.msg);
              this.$emit("fail");
            }
          );
        } else {
          return false;
        }
      });
    },
  },
};
</script>
